<template>
    <div v-for="item in goodsProduct" :key="item.id">
      <h1 class="title"  >
          <b>{{ item.name }}</b>
          <span>{{ item.saleInfo }}</span>
        </h1>
        <div class="product_list_box">  
				<dl v-for="(product,index) in item.goods" :key="index">
					<RouterLink 
          :to="{
            name:'Product',
            params:{
              id:product.id
            }
          }"
          >
						<dt style="margin: 10px 10px 0 10px;">
                    <img :src="product.picture">
						</dt>
						<dd>
							<span class="name">{{product.name}}</span>
							<span class="red" style="display: block; margin-top: 5px;">￥{{product.price}}</span>
						</dd>
					</RouterLink >
				</dl>
			</div>
    </div>
</template>

<script lang="ts" setup name="">
import { getGoodsAPI } from '@/apis/home/index'
import { onMounted, ref } from 'vue'
// 获取数据列表
const goodsProduct = ref([])
const getGoods = async () => {
  const res = await getGoodsAPI()
  // console.log(res);
  
  goodsProduct.value = res.result
}
onMounted(() => getGoods())
</script>

<style scoped lang="scss">
.product_list_box .name{
  vertical-align: middle;
  color: #9b9b9b;
  font-size: 14px;
  white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  height: 35px;
  line-height: 1.2; /* 设置行间距，可以根据需要调整 */
}
</style>